<template>
	<div class="ProductSystem-content">
		<div class="menu-box">
			<div class="menu-row top-row">
				<div
					class="menu-item"
					v-for="(item, i) in menuList.slice(0, 6)"
					:key="item.name"
					:style="{ marginTop: topMarginArr[i] + 'vw' }"
				>
					<div class="icon-wrap">
						<img class="base-img" :src="baseImg" />
						<img
							class="icon-img diamond"
							:src="item.icon"
							:style="{ animationDelay: randomDelays[i] + 's' }"
						/>
					</div>
					<div class="menu-label">{{ item.name }}</div>
				</div>
			</div>
			<div class="menu-row bottom-row">
				<div
					class="menu-item"
					v-for="(item, i) in menuList.slice(6, 9)"
					:key="item.name"
					:style="{ marginTop: bottomMarginArr[i] + 'vw' }"
				>
					<div class="icon-wrap">
						<img class="base-img" :src="baseImg" />
						<img
							class="icon-img diamond"
							:src="item.icon"
							:style="{ animationDelay: randomDelays[i + 6] + 's' }"
						/>
					</div>
					<div class="menu-label">{{ item.name }}</div>
				</div>
			</div>
		</div>
		<div class="title-box">产品体系</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import baseImg from '@/assets/img/base.png';
import icon from '@/assets/img/icon.png';
import icon1 from '@/assets/img/icon1.png';
import icon2 from '@/assets/img/icon2.png';
import icon3 from '@/assets/img/icon3.png';
import icon4 from '@/assets/img/icon4.png';
import icon5 from '@/assets/img/icon5.png';
import icon6 from '@/assets/img/icon6.png';
import icon7 from '@/assets/img/icon7.png';
import icon8 from '@/assets/img/icon8.png';

const menuList = [
	{ name: '应急救援', icon: icon1 },
	{ name: '城市管理', icon: icon2 },
	{ name: '水利监管', icon: icon3 },
	{ name: '电力巡检', icon: icon4 },
	{ name: '生态环保', icon: icon5 },
	{ name: '自然资源', icon: icon6 },
	{ name: '基础版', icon: icon7 },
	{ name: '标准版', icon: icon8 },
	{ name: '定制版', icon: icon }
];

const randomDelays = ref(menuList.map(() => (Math.random() * 1.5).toFixed(2)));
const topMarginArr = [
	(18 / 1920) * 100, // 18px -> vw
	(0 / 1920) * 100, // 0px -> vw
	(12 / 1920) * 100, // 12px -> vw
	(0 / 1920) * 100, // 0px -> vw
	(18 / 1920) * 100, // 18px -> vw
	(8 / 1920) * 100 // 8px -> vw
];

const bottomMarginArr = [
	(0 / 1920) * 100, // 0px -> vw
	(12 / 1920) * 100, // 12px -> vw
	(0 / 1920) * 100 // 0px -> vw空域管理
];
</script>

<style lang="scss" scoped>
.ProductSystem-content {
	width: 605px;
	height: 260px;
	background: url('@/assets/img/cptxBg.png') no-repeat center center;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin-top: 20px;
	animation: breath_light 3s ease infinite;
	.menu-box {
		width: 100%;
		.menu-row {
			display: flex;
			justify-content: center;
			&.top-row {
				gap: 20px;
				margin-bottom: 18px;
			}
			&.bottom-row {
				gap: 20px;
				margin-top: -8px;
				margin-bottom: 35px;
			}
		}
		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			transition: margin-top 0.3s;

			.icon-wrap {
				position: relative;
				width: 56px;
				height: 56px;
				.base-img {
					width: 56px;
					height: 56px;
					display: block;
				}
				.icon-img {
					position: absolute;
					left: 50%;
					top: 50%;
					width: 42px;
					height: 42px;
					transform: translate(-50%, -60%);
					filter: drop-shadow(0 0 8px #3acdff);
				}
				.diamond {
					animation: diamond-rotate 4s linear infinite;
				}
			}
			.menu-label {
				margin-top: 6px;
				color: #fff;
				font-size: 15px;
				text-shadow: 0 2px 8px #0ff;
				letter-spacing: 1px;
				white-space: nowrap;
			}
		}
	}

	.title-box {
		width: 165px;
		height: 46px;
		position: absolute;
		left: 50%;
		bottom: -15px;
		text-align: center;
		line-height: 46px;
		transform: translateX(-50%);
		background: url('@/assets/img/titleBg.png') no-repeat center center;
		background-size: 100% 100%;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		border-radius: 8px;
		z-index: 3;
		cursor: pointer;
		letter-spacing: 4px;
	}
}

@keyframes breath_light {
	0% {
		filter: brightness(100%);
	}
	50% {
		filter: brightness(120%);
	}
	100% {
		filter: brightness(100%);
	}
}

@keyframes diamond-rotate {
	0% {
		transform: translate(-50%, -60%) rotateY(0deg);
	}
	100% {
		transform: translate(-50%, -60%) rotateY(360deg);
	}
}
</style>
